<template>
	<view>
		<dsl-navbar title="服务费报表" isBack bgTopImg="white"></dsl-navbar>
		<view class="serve_message text-white text-center ">
			<view class="padding-top">
				总服务费（元）
			</view>
			<view class="padding-top-sm">
				￥{{serveData.sum}}
			</view>
			<view class="padding-top-xl">
				相比上月增长 {{serveData.sumIncrease}}%
			</view>
			<view class="message_number text-sm ">
				总人数：{{serveData.userCount}}人
			</view>
		</view>
		<view class="radius bg-white padding margin">
			<view class="rowsb align-center text-center">
				<view class="" v-for="(item,index) in classifyList" :key='index' @click="num = index">
					<view>{{item}}</view>
					<view class="title_Bottom" :class="{'avatar_title animation-scale-up':index == num}"></view>
				</view>
			</view>
			<view class=" solid-bottom bg-white margin radius animation-scale-up padding-bottom  "
				v-for="(item,index) in data" :key="index" hover-class="bg-gray " @click="payMessage(item)">
				<view class="flex margin-top">
					<image :src="item.image" mode="aspectFill" class="employer_image"></image>
					<view class="margin-left ">
						<view class="align-center ">
							<view class="employer_title  onelineshow text-bold">{{item.name}}</view>
						</view>
						<view class="text-xs text-gray margin-tb-sm">
							{{item.worktype}}
						</view>
						<view class="text-xs text-gray">
							入职日期：{{item.entry_time}}
						</view>
						<view class="margin-top-sm align-center">
						<!-- 	<view class="employer_buttom  text-sm margin-right-sm">
								{{item.status ==1?'待面试':''}}
								{{item.status ==2?'待入职':''}}
								{{item.status ==3?'已入职':''}}
								{{item.status ==4?'离职':''}}
								{{item.status ==5?'未通过':''}}
							</view> -->
							<view class="">
								服务费：<text class="text-sm">{{item.serviceMU}}元</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const app = getApp().globalData
	import {
		getserviceDetail,
		serviceDetail
	} from '@/common/path.js';
	export default {
		data() {
			return {
				classifyList: ['全部', '人才库', '保入职'], //分类
				num: 0,
				time: '', //时间筛选
				serveData: {},
				proportion: '', //比例
				serviceMoney: '', //总服务费
				data: []
			}
		},
		onLoad(option) {
			this.getserviceDetail() //服务费报表
			this.serviceDetail()
		},
		watch: {
			num(i) {
				this.data =[]
				this.getserviceDetail()
			}
		},
		methods: {
			//服务费报表
			serviceDetail() {
				let data = {}
				this.Http.POST(serviceDetail, data).then(res => {
					if (res.code == 1) {
						console.log('[详情]', res);
						this.serveData = res.data
					} else {
						setTimeout(r => {
							tools.showToast(res.msg)
						}, 3000)
					}
				})
			},
			//薪资明细
			payMessage(item) {
				console.log('薪资明细', item);
				app.serviceChargeData = item
				this.$tools.push('/pages/user/modules/payMessage')
			},
			//服务费报表
			getserviceDetail() {
				let data = {
					status: this.num + 1
				}
				this.Http.POST(getserviceDetail, data).then(res => {
					if (res.code == 1) {
						console.log('[资料]', res);
						this.data = res.data[0].user
					}
				})
			}
		},
	}
</script>

<style>
	.serve_message {
		width: 686rpx;
		height: 371rpx;
		background: linear-gradient(343deg, #2294FF 0%, #47AEFF 100%);
		box-shadow: 0px 0px 20rpx rgba(51, 51, 51, 0.16);
		opacity: 1;
		border-radius: 25rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	.message_number {
		width: 380rpx;
		height: 50rpx;
		background: #0074E1;
		opacity: 1;
		line-height: 50rpx;
		text-align: center;
		border-radius: 99rpx;
		margin: 0 auto;
		margin-top: 30rpx;
	}

	page {
		background: #F7F6FA;
	}

	.avatar_title {
		height: 6rpx;
		background: #00D88F;
		border-radius: 3rpx;
		margin-top: 10rpx;
		opacity: 1 !important;
	}

	.title_Bottom {
		height: 6rpx;
		border-radius: 3rpx;
		margin-top: 10rpx;
		opacity: 0;
	}

	.employer_image {
		width: 80rpx;
		height: 80rpx;
		background: #eeeeee;
		border-radius: 50%;
		opacity: 1;
	}

	.employer_title {
		width: 392rpx;
	}

	.employer_fans {
		width: 130rpx;
		height: 30rpx;
		border: 1rpx solid #2B9AFF;
		opacity: 1;
		border-radius: 20rpx;
		line-height: 30rpx;
		text-align: center;
		font-size: 20rpx;
		color: #2B9AFF;
	}

	.employer_submit {
		width: 110rpx;
		height: 50rpx;
		background: #E6716D;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
	}

	.employer_buttom {
		width: 100rpx;
		height: 30rpx;
		background: #2FAEEB;
		border-radius: 20rpx;
		line-height: 30rpx;
		text-align: center;
		color: white;
	}
</style>
